import React, { Component } from 'react';
import { Row, Col } from 'antd';
import './index.less';
import Util from '../../utils/utils';
import Axios from '../../axios';
import { connect } from 'react-redux';

class Admin extends Component {
	state={
		sysTime: ''
	}
	UNSAFE_componentWillMount(){
		this.setState({
			userName: "河畔一角"
		})
		this.timer = setInterval(()=>{
			let sysTime = Util.formateDate(new Date().getTime());
			this.setState({
				sysTime
			})
		},1000)
		this.getWeatherAPIData();
	}
	componentWillUnmount(){
		clearInterval(this.timer)
	}
	getWeatherAPIData(){
		let city = encodeURIComponent("福州");
		Axios.jsonp({url:'https://restapi.amap.com/v3/weather/weatherInfo?city='+city+'&key=d325c2029eb25fb18127449297f12cfb'})
		.then((res)=>{
			if(res.status === "1"){
				this.setState({
					weather: res.lives[0].weather,
					temperature: res.lives[0].temperature
				})
			}
		}).catch((err)=>{
			console.log(err)
		})
	}
	render(){
		const menuType = this.props.menuType;
		return (
			<div className="header">
				<Row className="header-top primary-color">
					{ 
						menuType?
							<Col span="6" className="logo">
								<img src="/assets/logo-ant.svg" alt=""/>
								<span>后台管理系统</span>
							</Col>:""
					}
					<Col span={menuType?18:24}>
						<span>欢迎,{ this.state.userName }</span>
						<span className="primary-color">退出</span>
					</Col>
				</Row>
				{
					menuType?"":
					<Row className="breadcrumb">
						<Col span="4" className="breadcrumb-title">
							{ this.props.menuName }
						</Col>
						<Col span="20" className="weather">
							<span className="date">{ this.state.sysTime }</span>
							<span className="weather-detail">天气&nbsp;:&nbsp;{this.state.weather}&nbsp;,&nbsp;{this.state.temperature}℃</span>
						</Col>
					</Row>
				}
			</div>
		)
	}
}

const mapStateToProps = (state) => {
	return {
		menuName: state.menuName
	}
}

export default connect(mapStateToProps)(Admin);